<!--表情包选择框-->
<template>
    <div>

        <div class="emotion-box" :style="{height: height+ 'px'}">
            <happy-scroll
                    color="rgba(0,0,0,0.2)"
                    size="10"
                    :resize="true"
                    smaller-move-v="start"
                    bigger-move-h="end"
                    :min-length-h="20"
                    :min-length-v="20">
                <div class="con">
                    <div class="emotion-box-line" v-for="(line, i) in list" :key="i">
                        <emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)">
                            {{item}}
                        </emotion>
                    </div>
                </div>
            </happy-scroll>
        </div>

    </div>
</template>

<script>
    import Emotion from './Emotion'

    export default {
        props: {
            height: {
                type: Number,
                default: 260,
            }
        },
        data() {
            return {
                list: [
                    ['微笑', '撇嘴', '色', '发呆', '得意','酷', '流泪', '害羞', '闭嘴', '大哭'],
                    ['调皮', '呲牙', '惊讶','冷汗', '抓狂', '偷笑', '可爱', '白眼', '傲慢', '难过'],
                    ['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵','奋斗', '蛋糕','疑问', '嘘'],
                    [ '晕', '再见','擦汗', '鼓掌','哈欠','强', '握手', '胜利', '抱拳', '好的']
                ]
            }
        },
        methods: {
            clickHandler(i) {
                let emotion = `#${i};`
                this.$emit('emotion', emotion)
            },
        },
        components: {
            Emotion
        }
    }
</script>
<style scoped>
    .emotion-box {
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
        padding:8px 5px 5px 14px;
        border: 1px solid #dadada;
        box-shadow: 0 0 5px #dadada;
    }
    .emotion-box-line {
        display: flex;

    }

    .emotion-item {
        flex: 1;
        text-align: center;
        cursor: pointer;
        min-width:30px;
    }
</style>